<template>
  <div class="check-contract">
    <van-nav-bar :border="false" placeholder fixed>
      <template #left>
        <svg-icon name="arrows" @click="topReturnClick" />
      </template>
      <template #title>
        <span class="contract-title">文件审批</span>
      </template>
    </van-nav-bar>
    <div class="fixed-name">
      <div class="contract-name">
        <span>{{ contractName }}</span>
        <van-dropdown-menu class="dropdown-file" active-color="#B7CDE4">
          <van-dropdown-item title="查看所有文件" ref="fileItem">
            <div class="file-look-box">
              <div
                class="file-look"
                v-for="item in fileAllList"
                :key="item.id"
                @click="selectFileClick(item)"
              >
                <van-tag
                  plain
                  type="primary"
                  :color="item.fileType === '1' ? '#1989fa' : '#FFB770'"
                  size="large"
                  >{{ item.fileType === '1' ? '待签署' : '附 件' }}</van-tag
                >

                <span>{{ item.fileName }}</span>
              </div>
            </div>
          </van-dropdown-item>
        </van-dropdown-menu>
      </div>
    </div>
    <div class="contract-img">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        @load="changeContractImageList"
        :immediate-check="false"
        ref="listRef"
      >
        <template v-for="item in contractImageList" :key="item">
          <div class="contract-content">
            <img :src="`data:image/png;base64,${item}`" alt="" />
          </div>
        </template>
      </van-list>
    </div>
    <div class="sign-bottom">
      <van-button
        class="bottom-btn"
        plain
        type="primary"
        @click="atOnceClick(2)"
        >拒绝</van-button
      ><van-button class="bottom-btn" type="primary" @click="atOnceClick(1)"
        >同意</van-button
      >
    </div>
  </div>
  <ApprovalOpinion ref="ApprovalOpinionRef" />
</template>

<script lang="ts">
import { defineComponent, ref, reactive } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import type { DropdownItemInstance, ListInstance } from 'vant'
import { getContractAllInfo, getContractBase64Img } from '@/api/contract'
import ApprovalOpinion from './component/approval-opinion.vue'

export default defineComponent({
  components: { ApprovalOpinion },
  setup() {
    const route = useRoute()
    const router = useRouter()

    const contractId = ref('')
    const contractName = ref('')
    const contractImageList = ref<any>([]) // 合同图片信息
    const listRef = ref<ListInstance>()
    const loading = ref(false)
    const finished = ref(false)
    const imageData = reactive({
      total: 0,
      PageNumber: 1,
      filePath: ''
    })
    contractId.value = route.query.contractId as string
    const fileAllList = ref<any>([]) // 合同所有文件
    // 获取合同信息
    const contractAllInfo = ref()
    const getContractList = async () => {
      try {
        const res = await getContractAllInfo({ contractId: contractId.value })
        if (res.code !== '0') return
        const list = res.data
        contractAllInfo.value = res.data
        contractName.value = list.contractBaseInfo.title
        // 代签文件
        const fileList = list.signingFileInfoList.map((item: any) => {
          return {
            fileId: item.fileId,
            fileName: item.fileName,
            filePath: item.filePath,
            filePages: item.filePages,
            fileType: '1'
          }
        })
        // 附属文件
        const attachFileList = list.attachFileInfoList.map((item: any) => {
          return {
            fileId: item.attachId,
            fileName: item.attachName,
            filePath: item.attachPath,
            filePages: item.attachPages,
            fileType: '2'
          }
        })
        fileAllList.value.push(...fileList, ...attachFileList)
        imageData.total = fileList[0].filePages
        imageData.filePath = fileList[0].filePath
        changeContractImageList()
      } catch (error) {
        return error
      }
    }
    getContractList()
    // 请求图片信息
    const changeContractImageList = async () => {
      for (let i = imageData.PageNumber; i <= imageData.PageNumber; i++) {
        const res = await getContractBase64Img({
          filePath: imageData.filePath,
          pageNum: i
        })
        if (res.code !== '0') return
        contractImageList.value.push(res.data)
      }
      imageData.PageNumber++
      loading.value = false
      if (contractImageList.value.length >= imageData.total) {
        finished.value = true
      }
    }
    // 切换文件
    const fileItem = ref<DropdownItemInstance>()
    const selectFileClick = (file: any) => {
      imageData.total = file.filePages
      imageData.PageNumber = 1
      imageData.filePath = file.filePath
      contractImageList.value.splice(0, contractImageList.value.length)
      finished.value = false
      loading.value = false
      listRef.value!.check()
      fileItem.value?.toggle(false)
    }
    // 返回按钮
    const topReturnClick = () => {
      router.push('/home-page')
    }
    // 同意
    const ApprovalOpinionRef = ref<InstanceType<typeof ApprovalOpinion>>()
    const atOnceClick = async (type: number) => {
      ApprovalOpinionRef.value!.showPopup({
        type,
        businessType: contractAllInfo.value.contractBaseInfo.businessType
      })
    }
    return {
      listRef,
      loading,
      finished,
      contractImageList,
      contractName,
      fileItem,
      fileAllList,
      ApprovalOpinionRef,
      changeContractImageList,
      topReturnClick,
      atOnceClick,
      selectFileClick
    }
  }
})
</script>

<style scoped lang="less">
.check-contract {
  position: relative;
  height: 100%;
  width: 100%;
  .contract-title {
    font-size: 17px;
    color: #101010;
    font-weight: 700;
  }
  .fixed-name {
    height: 41px;
    width: 100%;
    .contract-name {
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: absolute;
      top: 46px;
      left: 0;
      height: 40px;
      width: 100%;
      background-color: #fff;
      border-bottom: 1px solid #e0e0e0;
      font-size: 13px;
      padding-left: 20px;
      color: #101010;
      .dropdown-file {
        :deep(.van-dropdown-menu__bar) {
          height: 31px;
          padding-left: 5px;
          background-color: #2489f2;
          border-top-left-radius: 60px;
          border-bottom-left-radius: 60px;
          .van-ellipsis {
            color: #fff;
            font-size: 12px;
          }
          .van-dropdown-menu__title::after {
            display: none;
          }
        }
        .file-look-box {
          height: 168px;
          overflow: hidden;
          overflow-y: auto;
          .file-look {
            height: 55px;
            padding: 0 20px;
            line-height: 55px;
            font-size: 14px;
            border-bottom: 1px solid #e6e6e6;
            .van-tag {
              margin-right: 10px;
            }
          }
        }
      }
    }
  }

  .contract-img {
    height: calc(100% - 147px);
    overflow: hidden;
    overflow-y: auto;
    .contract-content {
      position: relative;
      margin-bottom: 10px;
      img {
        display: block;
        width: 100%;
      }
    }
  }
  .sign-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 59px;
    width: 100%;
    background-color: #fff;
    border-top: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .bottom-btn {
      width: 160px;
      height: 40px;
    }
  }
}
</style>
